<template>
	<view>
		<cu-custom bgColor="bg-gradual-fff" isBack="true">
			<block slot="content">详情</block>
		</cu-custom>
		<u-loading-page :loading="true" loading-text="loading..." v-if="showLoading"></u-loading-page>
		<view v-show="!showLoading">
			<view class="viewbox"></view>
			<view v-if="!isNull">
				<view class="increment_info_a">
					<product-swiper :imgUrls="swiperList" :video="goodsDetail.video"></product-swiper>
				</view>
				
				<view class="l_bg" style="width: 720rpx;margin-top: 30rpx;">
					<view class="bor_jb">
						<view class="l_cen">
							<view class="l_top">
								<view class="l_bottom">
									<view class="increment_info_b">
										<view class="increment_info_b_b" :style="'background-image:url('+goodsinfo_bg+');'">
											<view class="index_b_d_b_a_b_b_a" v-if="goodsDetail.integral==0 && goodsDetail.price>0">
												<view class="index_b_d_b_a_b_b_a_a"><span>￥</span>{{goodsDetail.price}}</view>
												<!-- <view class="index_b_d_b_a_b_b_a_b">¥{{goodsDetail.market_price}}</view> -->
											</view>
											<view class="index_b_d_b_a_b_b_a" v-if="goodsDetail.price==0 && goodsDetail.integral>0">
												<view class="index_b_d_b_a_b_b_a_a"><span>积分</span>{{goodsDetail.integral}}</view>
											</view>
											<view class="index_b_d_b_a_b_b_a" v-if="goodsDetail.price>0 && goodsDetail.integral>0">
												<view class="index_b_d_b_a_b_b_a_a"><span>积分</span>{{goodsDetail.integral}}+<span>¥</span>{{goodsDetail.price}}</view>
											</view>
											<!-- <view class="increment_info_b_b_a">已售{{goodsDetail.order_num}}</view> -->
										</view>
										
										<view class="increment_info_b_aa">
											<view class="increment_info_b_a">{{goodsDetail.name}}</view>
											<view class="increment_info_b_d">{{goodsDetail.sales_sum}}人购买</view>
											<!-- <view class="increment_info_b_d" v-if="goodsDetail.remark">{{goodsDetail.remark}}</view> -->
											<view class="increment_info_b_c" v-if="goodsDetail.order_give_integral>0 || goodsDetail.distribution>0">
												<view class="increment_info_b_c_a" v-if="goodsDetail.order_give_integral>0">下单预计返<span>{{goodsDetail.order_give_integral}}</span>积分</view>
												<view class="increment_info_b_c_a" v-if="goodsDetail.distribution>0">分享预计赚佣金<span>¥{{goodsDetail.distribution}}</span></view>
											</view>
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				
				<view class="l_bg" style="width: 720rpx;margin-top: 30rpx;">
					<view class="bor_jb">
						<view class="l_cen">
							<view class="l_top">
								<view class="l_bottom">
									<view class="increment_info_c">
										<view class="increment_info_c_a" style="margin-top: 0;" @tap="showSpecFun(1)">
											<view class="increment_info_c_a_a">选择</view>
											<view class="increment_info_c_a_b">
												<view class="increment_info_c_a_b_a" v-for="(item, index) in goodsDetail.goods_item">
													<view class="increment_info_c_a_b_a_a" v-if="item.image">
														<image :src="item.image"></image>
													</view>
													<view class="increment_info_c_a_b_a_b" v-else>{{item.spec_value_str}}</view>
												</view>
											</view>
											<view class="increment_info_c_a_d" v-if="goodsDetail.goods_item">
												共{{goodsDetail.goods_item.length}}款</view>
										</view>
										<view class="increment_info_c_a" v-if="address_info" @click="onAddressExpress">
											<view class="increment_info_c_a_a">发货</view>
											<view class="increment_info_c_a_c">
												<view class="increment_info_c_a_c_a" style="width:95%;">
													<view class="increment_info_c_a_c_a_b">配送至：{{address_info.province}} {{address_info.city}}
														{{address_info.district}} {{address_info.address}}～运费¥{{goodsDetail.shipping_price}}
													</view>
												</view>
											</view>
											<view class="increment_info_c_a_e">
												<u-icon name="arrow-right" color="#ffff" size="12"></u-icon>
											</view>
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="l_bg" style="width: 750rpx;margin-top: 30rpx;">
					<view class="bor_jb">
						<view class="l_cen">
							<view class="l_top">
								<view class="l_bottom">
									<view class="increment_info_d">
										<view class="increment_info_d_a">商品详情</view>
										<view class="increment_info_d_b">
											<u-parse :content="goodsDetail.content" :lazyLoad="true"></u-parse>
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view style="width: 750rpx;height: 160rpx;"></view>
				<view class="service_info">
					<button open-type="share" class="service_info_a">
						<view class="service_info_a_aa">
							<u-icon name="share" color="#000" size="20"></u-icon>
						</view>
						<view class="service_info_a_b">分享</view>
					</button>
					<button open-type="contact" class="service_info_a">
						<view class="service_info_a_aa">
							<u-icon name="kefu-ermai" color="#000" size="20"></u-icon>
						</view>
						<view class="service_info_a_b">客服</view>
					</button>
					<view @click="goPage('/pages/cart/list')" class="service_info_a">
						<view class="service_info_a_aa">
							<u-icon name="shopping-cart" color="#000" size="20"></u-icon>
						</view>
						<view class="service_info_a_b">购物车</view>
						<view class="cart_num_a_a" v-if="cart_num>0">{{cart_num}}</view>
					</view>
					<view class="service_info_b">
						<view class="service_info_b_a" @tap="showSpecFun(0)">加入购物车</view>
						<view class="service_info_b_b" @tap="showSpecFun(1)">立即购买</view>
					</view>
				</view>
			</view>
			<view v-else>
				<view class="details-null column-center">
					<image class="img-null" src="/static/goods_null.png"></image>
					<view class="xs muted">该商品已下架或不存在，去逛逛别的吧~</view>
				</view>
			</view>
		</view>
		
		<spec-popup :show="showSpec" :goods="goodsDetail" @close="showSpec = false"
			@addcart="onAddCart" @change="onChangeGoods"
			@confirm="onConfirm" :group="Boolean(isGroup)" red-btn-text="立即购买" yellow-btn-text="加入购物车">
		</spec-popup>
	</view>
</template>
<script>
	
import request from '@/common/request.js';
import cnMoney from '@/components/cn-money/cn-money.vue';
import storage from '@/common/storage.js';
import {
		loadingType,
} from '@/utils/type';
export default {
	components: {
		cnMoney
	},
	data(){
		return {
			showLoading:true,
			isNull: false,
			goodsinfo_bg:request.baseUrl_img+'/img/goodsinfo_bg.png',
			cart_num:0,
			min_price:0,
			swiperList:[],
			goodsDetail:[],
			commentList: [],
			commentList_count:0,
			showSpec: false,
			checkedGoods:[],
			address_info:'',
			isGroup:0,
			id:0,
			uid:'',
			distribution_code:'',
			baseUrl_H5:request.baseUrl_H5
		}
	},
	onLoad: function (options) {
		if (!options.id) {
			this.isNull=true;
			return;
		} else {
			this.id =options.id;
			if(options.distribution_code){
				uni.setStorageSync("tj_code", options.distribution_code);
			}
		}
	},
	onShow() {
		this.uid=uni.getStorageSync('uid');
		this.distribution_code=storage.currentUser.distribution_code;
		this.getGoodsDetailFun();
		if(this.uid){
			this.getCartNumFun();
			this.DefaultAddress_post();
		}
	},
	onShareAppMessage(res) { //发送给朋友
		return {
			title:this.goodsDetail.name,
			path:'/pages/goods/info?id='+this.goodsDetail.id+'&distribution_code='+this.distribution_code,
			imageUrl:this.goodsDetail.image,
			desc:this.goodsDetail.remark,
			content:this.goodsDetail.remark
		}
	},
	onShareTimeline(res) {//分享到朋友圈
		return {
			title:this.goodsDetail.name,
			path:'/pages/goods/info?id='+this.goodsDetail.id+'&distribution_code='+this.distribution_code,
			imageUrl:this.goodsDetail.image,
			desc:this.goodsDetail.remark,
			content:this.goodsDetail.remark
		}
	},
	mounted() {
		
	},
	methods: {
		user_share_post() {
			let paramsList = {
				unionid: this.id,
				uid:this.uid,
				type:1
			}
			let optsList = {
				url: 'u-user_share',
				method: 'post'
			};
			let _this = this;
			let topicinfo=this.topicinfo;
			request.httpRequest(optsList, paramsList).then(res => {
				if (res.data.code == 200) {
					_this.getGoodsDetailFun();
				}
			});
		},
		// 点击选择收货地址
		onAddressExpress() {
			uni.navigateTo({
				url: `/chat/pages/user/user_address/user_address?type=${1}`
			})
		},
		DefaultAddress_post() {
			let paramsList = {
				uid: this.uid
			}
			let optsList = {
				url: 'ua-getDefault',
				method: 'post'
			};
			let _this = this;
			request.httpRequest(optsList, paramsList).then(res => {
				if (res.data.code == 200) {
					_this.address_info = res.data.data;
					_this.district_id = _this.address_info.district_id;
					_this.city_id = _this.address_info.city_id;
					_this.province_id = _this.address_info.province_id;
				}
			});
		},
		goPage(url) {
			uni.navigateTo({
				url
			});
		},
		getCartNumFun(){
			let paramsList = {
				'uid':this.uid
			}
			let optsList = {
				url: 'c-cart_num',
				method: 'post'
			};
			let _this=this;
			request.httpRequest(optsList, paramsList).then(res => {
				if(res.data.code == 200){
					_this.cart_num=res.data.data.num;
				}
			});
		},
		onChangeGoods(e) {
			this.checkedGoods = e.detail;
		},
		showSpecFun(type, id) {
			if (!this.$util.isLogin()) {
				return;
			}
			this.isGroup=type;
			this.showSpec = true;
		},
		async onAddCart(e) {
			let {
				id,
				goodsNum
			} = e.detail;
			const paramsList = {
				goods_num: goodsNum,
				item_id: id,
				uid: this.uid
			}
			let optsList = {
				url: 'c-add',
				method: 'post'
			};
			uni.showLoading({
				title: '加入中...',
				mask: true
			})
			let _this=this;
			request.httpTokenRequest(optsList, paramsList).then(res => {
				uni.hideLoading();
				uni.showToast({
					title: res.data.msg,
					icon: 'none',
					duration: 2000
				});
				if (res.data.code == 200) {
					_this.showSpec = false;
					_this.getCartNumFun();
				}
			});
		},
		async onConfirm(e) {
			let {
				id,
				goodsNum
			} = e.detail;
			let goods = [{
				item_id: id,
				num: goodsNum,
			}];
			const params = {
				goods,
				hotel_id:this.hotel_id
			};
			this.showSpec = false;
			uni.navigateTo({
				url: '/pages/confirm_order/confirm_order?data=' + encodeURIComponent((JSON.stringify(
					params)))
			})
		},
		user_collect_post() {
			let paramsList = {
				unionid: this.id,
				uid:this.uid,
				type:1
			}
			let optsList = {
				url: 'u-user_collect',
				method: 'post'
			};
			let _this = this;
			request.httpTokenRequest(optsList, paramsList).then(res => {
				if (res.data.code == 200) {
					_this.getGoodsDetailFun();
				}
			});
		},
		async getGoodsDetailFun() {
			let paramsList = {
				id: this.id,
				uid:this.uid
			}
			let optsList = {
				url: 'g-getGoodsDetail',
				method: 'get'
			};
			let _this = this;
			request.httpRequest(optsList, paramsList).then(res => {
				if (res.data.code == 200) {
					let {
						goods_image,
						content
					} = res.data.data;
					_this.swiperList = goods_image;
					let data_list=JSON.parse(JSON.stringify(res.data.data));
					_this.min_price=Number(_this.goodsDetail.min_price);
					_this.goodsDetail =data_list;
				} else {
					this.isNull = true
				}
				this.showLoading = false;
			});
		},
	}
}
</script>

<style  lang="scss" scoped>
	.service_info_a_aa{
		width:20px;
		height:20px;
		margin: auto;
	}
	.service_info_a_b{
		text-align: center;
		font-family: 思源黑体;
		font-size: 28rpx;
		line-height: 40rpx;
	}
	.goods_aa{
		width: 749rpx;
		height:auto;
		background: #FFFFFF;
		border-radius: 20rpx;
		margin-top: 20rpx;
		padding: 0 25rpx;
	}
	.goods_aa_a{
		padding: 50rpx 0 30rpx 0;
		overflow: hidden;
	}
	.goods_aa_a_a{
		font-size: 36rpx;
		font-family: PingFang SC;
		font-weight: 800;
		color: #000000;
		float: left;
	}
	.goods_aa_a_a span{
		color: #666666;
	}
	.goods_aa_a_b{
		float: right;
		overflow: hidden;
	}
	.goods_aa_a_b_a{
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #444444;
		float: left;
	}
	.goods_aa_a_b_b{
		float: left;
		margin-top: 8rpx;
		margin-left: 10rpx;
	}
	.goods_aa_b{
		overflow: hidden;
	}
	button::after{
		border: 0;
	}
	button{
		background-color:#FFFFFF;
		padding-left: 0;
		padding-right: 0;
	}
	.cart_num_a{
		width: 100rpx;
		height: 100rpx;
		background: #FFFFFF;
		border: 1px solid #EEEEEE;
		box-shadow: 0rpx 5rpx 27rpx 0rpx rgba(86,124,46,0.1);
		border-radius: 50%;
		position: fixed;
		bottom: 200rpx;
		right: 20rpx;
		background-position: center;
		background-repeat: no-repeat;
		background-size: 40rpx;
	}
	.cart_num_a_a{
		width: 54rpx;
		height: 40rpx;
		background:#CC8FBD;
		border-radius: 20rpx;
		position: absolute;
		top:-20rpx;
		right:-20rpx;
		text-align: center;
		line-height: 40rpx;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 800;
		color: #ffffff;
	}
	
	.increment_info_a{
		width: 750rpx;
		height: 750rpx;
	}
	.increment_info_b{
		width: 720rpx;
	}
	.increment_info_b_b{
		width: 720rpx;
		height: 98rpx;
		background-position: center;
		background-repeat: no-repeat;
		background-size: 720rpx 98rpx;
		overflow: hidden;
	}	
	.index_b_d_b_a_b_b_a{
		font-size: 50rpx;
		font-family: PingFang SC;
		font-weight: 800;
		color: #fff;
		float: left;
		line-height: 98rpx;
		margin-left: 50rpx;
	}
	.index_b_d_b_a_b_b_a_a{
		font-size: 50rpx;
		font-family: PingFang SC;
		font-weight: 800;
		color: #fff;
		float: left;
	}
	.index_b_d_b_a_b_b_a_a span{
		font-size: 32rpx;
	}
	.increment_info_b_b_a{
		float: right;
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: 800;
		color: #fff;
	}
	
	.increment_info_b_aa{
		padding:50rpx;
		overflow: hidden;
	}
	.increment_info_b_a{
		font-size: 36rpx;
		font-family: PingFang SC;
		font-weight: 800;
		color:#FFFFFF;
	}
	.increment_info_b_d{
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #fff;
		margin-top: 20rpx;
	}
	.increment_info_b_c{
		margin-top: 20rpx;
		overflow: hidden;
	}
	.increment_info_b_c_a{
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color:#fff;
		float: left;
		margin-right: 24rpx;
	}
	.increment_info_b_c_a span{
		color:#FF6000;
		padding: 0 15rpx;
	}
	.increment_info_b_c_b{
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #111526;
		float: right;
		background-position: left;
		background-repeat: no-repeat;
		background-size: 30rpx 23rpx;
		padding-left: 40rpx;
	}
	
	.increment_info_c{
		width: 720rpx;
		height: auto;
		padding: 50rpx 25rpx;
	}
	.increment_info_c_a{
		height: 80rpx;
		line-height: 80rpx;
		background-repeat: no-repeat;
		background-size: 50rpx;
		background-position: right;
		margin-top: 50rpx;
	}
	.increment_info_c_a_a{
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 800;
		color: #fff;
		float: left;
	}
	.increment_info_c_a_b{
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #333333;
		float: left;
		margin-left: 25rpx;
		max-width: 470rpx;
		height: 80rpx;
		overflow: hidden;
	}
	.increment_info_c_a_b_a{
		float: left;
	}
	.increment_info_c_a_b_a_a{
		width: 80rpx;
		height: 80rpx;
		border-radius: 10rpx;
		float: left;
		margin-right: 20rpx;
		overflow: hidden;
	}
	.increment_info_c_a_b_a_a image{
		width: 80rpx;
		height: 80rpx;
	}
	.increment_info_c_a_b_a_b{
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: 800;
		color: #000000;
		float: left;
		margin-right: 20rpx;
		line-height: 80rpx;
	}
	.increment_info_c_a_c{
		width: 520rpx;
		height: 80rpx;
		float: left;
		margin-left: 25rpx;
		overflow: hidden;
	}
	.increment_info_c_a_c_a{
		width: 28%;
		float: left;
		margin-right: 20rpx;
	}
	.increment_info_c_a_c_a_a{
		width: 100%;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #666666;
		line-height: 45rpx;
	}
	.increment_info_c_a_c_a_b{
		width: 100%;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #fff;
	}
	.increment_info_c_a_e{
		float: right;
		margin-top: 25rpx;
	}
	.increment_info_c_a_d{
		width: 120rpx;
		height: 80rpx;
		background: #EEEEEE;
		border-radius: 10rpx;
		text-align: center;
		line-height: 80rpx;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #666666;
		float: left;
	}
	.increment_info_d{
		width: 750rpx;
		height: auto;
		overflow: hidden;
		padding-bottom: 40rpx;
	}
	.increment_info_d_a{
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: 800;
		color: #fff;
		height:100rpx;
		line-height:100rpx;
		margin-left: 30rpx;
	}
	.increment_info_d_b{
		padding:0rpx 30rpx 30rpx 30rpx;
		overflow: hidden;
	}
	.service_info{
		width: 750rpx;
		height: 150rpx;
		background: #FFFFFF;
		border: 1px solid #F2F2F2;
		border-radius: 10rpx 10rpx 0rpx 0rpx;
		padding: 16rpx 28rpx;
		position:fixed;
		bottom: 0;
	}
	.service_info_a{
		height: 80rpx;
		font-size: 20rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #666666;
		background-position: center 0rpx;
		background-repeat: no-repeat;
		background-size: 50rpx;
		line-height: 130rpx;
		float: left;
		width: 80rpx;
		text-align: center;
		position: relative;
	}
	.service_info_a_a{
		width: 34rpx;
		height: 34rpx;
		background: linear-gradient(0deg, #E71102, #E71102);
		border-radius: 17rpx;
		position:absolute;
		top:0;
		right: 0;
		font-size: 20rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
		text-align: center;
		line-height: 34rpx;
	}
	.service_info_aa{
		color: #E71102;
	}
	.service_info_aaa{
		background-size: 45rpx;
	}
	.service_info_b{
		width: 420rpx;
		height: 88rpx;
		background: #FFFFFF;
		border: 2px solid #62469B;
		border-radius: 44rpx;
		float: right;
		overflow: hidden;
	}
	.service_info_b_a{
		width: 50%;
		height: 88rpx;
		line-height: 80rpx;
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 800;
		color: #62469B;
		text-align: center;
		line-height: 78rpx;
		float: left;
	}
	.service_info_b_b{
		width: 50%;
		height: 88rpx;
		line-height: 80rpx;
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 800;
		color: #fff;
		text-align: center;
		line-height: 78rpx;
		float: left;
		background-color:#62469B;
	}
	.details-null {
		padding-top: 140rpx;
		margin-bottom: 100rpx;
	}
	
	.column-center {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
	
	.img-null {
		width: 300rpx;
		height: 300rpx;
	}
</style>